<template>
  <div
    class="custom-container"
    :style="{ background: '#fff', padding: '24px', margin: 0 }"
  >
    <a-input-search
      class="search"
      placeholder="输入关键词搜索"
      @search="search"
      v-model="searchText"
      enterButton
    />
    <span style=" margin-left: 50px;margin-right:5px">出入类型:</span>
    <a-select
      default-value=""
      class="all-select"
      style="width:250px"
      @change="selectChange"
    >
      <a-select-option value="">
        全部
      </a-select-option>
      <a-select-option value="出">
        进入社区
      </a-select-option>
      <a-select-option value="入">
        离开社区
      </a-select-option>
    </a-select>
    <!-- <a-date-picker @change="timeChange" placeholder="请选择日期" />~-->
    <!-- <a-date-picker @change="timeChange" placeholder="请选择日期" />  -->
    <!-- <a-icon type="cloud-server" class="all-data" @click="exportData" /> -->
    
    <a-icon type="file-excel" theme="twoTone" two-tone-color="#52c41a" class="all-data" @click="exportData()" />

    <a-table
      style=" margin: 24px 0"
      :columns="columns"
      :dataSource="userList"
      :pagination="pagination"
      :loading="loading" 
    >
     <template slot="personType" slot-scope="text, item">
        <div v-if="item.personType == 1">
          <a-tag  color="cyan">常住</a-tag>
        </div>
        <div v-if="item.personType == 2">
          <a-tag color="purple">租户</a-tag>
        </div>
           <div v-if="item.personType == 3">
          <a-tag color="blue">访客</a-tag>
        </div>
      </template>
      <template slot="inOrOut" slot-scope="text, item">
        <div v-if="item.inOrOut == 0">
          <a-tag color="#87d068">进入社区</a-tag>
        </div>
        <div v-if="item.inOrOut == 1">
          <a-tag color="#108ee9">离开社区</a-tag>
        </div>
      </template>
       <!-- <a slot="locked" >
                <a-icon type="eye" style=" font-size: 18px; margin-left:-5px;"/> 
       </a> -->
       <template slot="bodyTemperature" slot-scope="text, item">
        <div v-if="item.bodyTemperature>37.5">
          <a-icon type="alert" theme="twoTone" two-tone-color="#ec1316"
          style=" font-size: 18px; margin-left:5px;"/> 
        </div>
       
        <div v-else-if="item.bodyTemperature<36.6">
          <a-icon type="alert" theme="twoTone" two-tone-color="#52c41a"
          style=" font-size: 18px; margin-left:5px;"/> 
        </div>
        <div v-else>
          <a-icon type="alert" theme="twoTone" two-tone-color="#ecda13"
          style=" font-size: 18px; margin-left:5px;"/> 
        </div>
      </template>
       <span slot="action" slot-scope="text, item">
           <div v-if="item.bodyTemperature<36.6">
            <a-icon type="mail" style="font-size:22px;margin-right:10px"/>
            </div>
           <div v-else>
             <a-icon type="mail" theme="twoTone" 
               style="font-size:22px;margin-right:10px"
               @click="send(item)"/>       
        </div>
        </span>
        
    </a-table>
     <a-modal
      v-model="formVisible"
      :title="formTitle"
      @ok="submit"
      okText="确定"
      cancelText="取消"
    >
      <a-form :form="form" @submit="submit">
        
        <a-form-item
          label="姓名"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-input v-decorator="['name']" />
        </a-form-item>
        <a-form-item
          label="检查人员手机"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-input v-decorator="['inspectorPhone']" />
        </a-form-item>
        <a-form-item
          label="体温"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-input v-decorator="['bodyTemperature']" />
        </a-form-item>
        <a-form-item
          label="预警信息"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 16 }"
        >
          <a-textarea placeholder="不大于120字" :rows="4" 
            v-decorator="[
              'haha',
              {
                rules: [
                  { required: true, message: '内容不能为空' },
                  { whitespace: true, message: '内容不能为空' },
                  { max:120, message: '内容不能大于120字;' }
                ]
              }
            ]"
          />
        </a-form-item>


        
        
      
    
      </a-form>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: '姓名',
    dataIndex: 'name'
  },
  {
    title: '人员类型',
    dataIndex: 'personType',
    scopedSlots: { customRender: 'personType' },
    
  },
  
  {
    title: '出入类型',
    scopedSlots: { customRender: 'inOrOut' }
  },
    {
    title: '检查人员姓名',
    dataIndex: 'inspectorName'
  },
    {
    title: '社区名称',
    dataIndex: 'communityLocation'
    
  },
  {
    title: '体温',
    dataIndex: 'bodyTemperature'
  },
    {
    title: '出/入时间',
    dataIndex: 'createTime',
     defaultSortOrder: 'descend',
    sorter: (a, b) => Date.parse(a.createTime) - Date.parse(b.createTime),
    

  },
 {
    title: '状态',
    scopedSlots: { customRender: 'bodyTemperature' }
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'action'}
  }

 

];

export default {
  data () {
    return {
      columns,
      page: 0,
      size: 10,
      pagination: {},
      userList: [],
      loading: false,
      keyword: '',
      searchText: '',
      formVisible: false,
      formTitle: '',
      form: this.$form.createForm(this),
    
      preUpdateId: ''
      
     
    };
  },
  created () {
    this.load();
     const arr = ['name', 'inspectorPhone', 'bodyTemperature', 'haha'];
    arr.forEach(element => {
      this.form.getFieldDecorator(element);
      console.log(element)
    });
   
  },
  methods: {
    selectChange (val) {
      this.$data.keyword = val;
      this.load();
    },
    timeChange () {},
    exportData () {
      let token = localStorage.getItem('ktoken');
      fetch(
        'https://dudu.gaoxiao.love/healthqrcode/website/website/inspector/exportAccessList',
        {
          method: 'GET',
          headers: new Headers({
            Authorization: token
          })
        }
      )
        .then(res => res.blob())
        .then(data => {
          const blobUrl = window.URL.createObjectURL(data);
          const a = document.createElement('a');
          a.download = '出入信息列表' + '.xlsx';
          a.href = blobUrl;
          a.click();
          setShareVisible(false);
        });
    },

    load () {
      this.$data.loading = true;
      const page = this.$data.page;
      const size = this.$data.size;
      let parma = {
        pageNumber: page,
        pageSize: size,
        keyword: this.$data.keyword
        // id: 175
      };
      this.$axios.userHealthInfoList(parma).then(res => {
        if (res.resultCode == 0) {
          const data = res.data;
          const pagination = {
            total: data.totalElements,
            onChange: this.pageChange
          };
          this.$data.pagination = pagination;
          this.$data.userList = data.content;
        } else {
          this.$message.error('获取数据失败', 1.5);
        }

        this.$data.loading = false;
      });
    },
    pageChange (page, pageSize) {
      this.$data.page = page - 1;
      this.$data.size = pageSize;
      this.load();
    },

    search () {
      this.$data.keyword = this.$data.searchText;
      this.$data.page = 0;
      this.load();
    },
    detail (id) {
      this.$router.push({
        name: 'UserInforDetail',
        params: {
          id
        }
      });
    },
    goOut (id) {
      this.$router.push({
        name: 'UserCheckList',
        params: {
          id
        }
      });
    },
    send (item) {
      console.log(item)
      this.$data.preUpdateId = item.name;
    //  console.log(this.$data.preUpdateId);
      this.$data.preUpdate = true;
      (this.$data.formTitle = '健康预警'), (item.password = '******');
      this.$data.form.setFieldsValue(item);
      this.$data.formVisible = true;
    },
       submit () {
      this.form.validateFields((err, values) => {
        if (!err) {
           console.log('Received values of form: ', values);
           this.$message.info('发送预警成功', 1.5);
          (this.$data.formVisible = false);
        }
      });
    }

  }
};
</script>

<style>
.search {
  position: relative;
  top: 1px;
  margin-left: 8px;
  width: 300px !important;
}
.all-data {
  float: right;
  font-size: 27px;
  margin-right: 20px;
}
.all-select {
  width: 240px;
  margin-right: 50px;
}
</style>
